<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>v-html</title>
</head>

<body>
    <!-- 
        v-html指令
            1.作用：向指定节点中渲染包含html结构的内同
            2.与插值语法区别：
                1.v-html会替换节中的所有内容   {{xxx}}不会
                2.v-html会识别html结构
            3。严重注意，v-html又安全隐患问题 、
                1.在网站动态渲染任意html是非常危险的，容易导致ssh攻击
                2.一定要在刻印内容上使用v-html，永远不要用在用户提交内容   
     -->
    <div id="root">
        <div>你好！{{name}}</div>

        <div v-html="msg"></div>

    </div>


    <script>
        new Vue({
            el: '#root',
            data: {
                name: '清华大学',
                msg: '<h2>的表姐表弟就</h2>'
            }
        })
    </script>
</body>

</html>